import React from 'react';
import {
  DeleteOutlined,
} from '@ant-design/icons';
import { Table } from 'antd';
import { observer } from 'mobx-react-lite';
import { TableProps } from 'rc-table/lib/Table';
import { FileUploader } from '~/components/FileUploader';

interface Props extends Omit<TableProps, 'data'>{
  type?: string
  data?: TableProps['data']
  deleteItem?: (type: string, index: number) => void
  UploadItem?: (fileUrl: string, type: string, index: number) => void
}

export const EvalutionTable = observer((props: Props) => {
  const {
    type = 'vfm',
    deleteItem = () => ({}),
    UploadItem = () => ({}),
    data = [] as any,
  } = props;

  const fileUploadOptions = {
    accept: 'application/zip,application/vnd.rar,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf',
    showUploadList: false,
  };

  // 获取fileUrl
  const getFileUrl = (info: any, index: any, row: any) => {
    if (info[0].status === 'done') {
      UploadItem(info[0].response.data, type, index);
    }
    row.hasFile = true;
    // state.fileValue.splice(0, 1, info[0]);
    // state.fileValue.push(info[0]);
  };

  const columns = [
    {
      title: 'NO.',
      dataIndex: 'number',
      key: 'number',
      render: (_text: string, _row: any, _index: number) => (
        <span>{_index + 1}</span>
      ),
    },
    {
      title: 'Evaluate time',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: 'Attachments',
      dataIndex: 'fileUrl',
      key: 'fileUrl',
    },
    {
      title: 'Actions',
      key: 'id',
      render: (_text: string, _row: any, _index: number) => (
        <span className="flex">
          <span
            className="cursor-pointer text-gray-500 flex-1"
          >
            <FileUploader
              {...fileUploadOptions}
              isDisabled={_row.hasFile}
              // value={state.fileValue}
              uploadIcon={'simple'}
              onChange={ (value) => getFileUrl(value, _index, _row)}
            />
          </span>
          <span
            className="cursor-pointer text-gray-500 flex-1"
            onClick={() => {
              deleteItem(type, _index);
            }}
          >
            <DeleteOutlined />
          </span>
        </span>
      ),
    },
  ];

  return (
    <Table
      bordered
      dataSource={data}
      columns={columns}
      pagination={false}
      rowKey={(record: any, index: number | undefined) => `complete${record.number as string}${index as number}`}
    />
  );
});
